<template>
  <div class="filter-panel">
    <van-dropdown-menu>
      <!-- 驾照类型筛选（C1/C2/C3等） -->
      <van-dropdown-item
          v-model="licenseTypeId"
          :options="licenseTypeOptions"
          title="驾照类型"
      />
      <!-- 课程类型筛选（科目一/二/三/四） -->
      <van-dropdown-item
          v-model="courseTypeId"
          :options="courseTypeOptions"
          title="课程类型"
      />
    </van-dropdown-menu>
  </div>
</template>

<script lang="ts" setup>
import {onMounted} from 'vue';
import {ref, watch} from 'vue'
import {listLicenseTypeAPI} from "@/api/base-data/licenseType";
import {showToast} from 'vant';
import {listCourseSubjectAPI} from "@/api/base-data/courseSubject";

// 课程类型选项（科目一/二/三/四）
const licenseTypeId = defineModel<string>('licenseTypeId', {default: ''})
const courseTypeId = defineModel<string>('courseTypeId', {default: ''})
const licenseTypeOptions = ref<{ text: string; value: string }[]>([{text: "全部类型", value: ""}])
const courseTypeOptions = ref<{ text: string; value: string }[]>([{text: "全部科目", value: ""}])

onMounted(async () => {
  const {data} = await listLicenseTypeAPI({})
  if (data) {
    const options = data.map((item) => {
      return {
        text: `${item.licenseCode}-${item.licenseName}`,
        value: item.id
      }
    }) as any
    licenseTypeOptions.value = [{text: "全部类型", value: ""}, ...options]
  } else {
    showToast('驾照类型获取失败')
    licenseTypeOptions.value = [{text: "全部类型", value: ""}]
  }
})

const getCourseTypeOptions = async () => {
  if (!courseTypeOptions.value || courseTypeOptions.value.length === 0 || courseTypeOptions.value[0].value !== '') {
    courseTypeOptions.value = [{text: "全部科目", value: ""}]
    return
  }
  const {data} = await listCourseSubjectAPI({licenseTypeId: licenseTypeId.value})
  if (data && data.length > 0) {
    const options = data.map((item) => {
      return {
        text: `${item.subjectCode}-${item.subjectName}`,
        value: item.id
      }
    }) as any
    courseTypeOptions.value = [{text: "全部科目", value: ""}, ...options]
  } else {
    showToast('科目类型获取失败')
    courseTypeOptions.value = [{text: "全部科目", value: ""}]
  }
}
// 注册改变事件
const emit = defineEmits(['change'])

// 监听驾照类型变化
watch(licenseTypeId, async () => {
  await getCourseTypeOptions()
  courseTypeId.value = ''
  emit('change')
})
watch(courseTypeId, () => {
  emit('change')
})
</script>

<style lang="less" scoped>
.filter-panel {
  position: sticky;
  top: 46px;
  z-index: 99;
  background: white;

  :deep(.van-dropdown-menu__bar) {
    box-shadow: none;
  }

  :deep(.van-dropdown-item__option) {
    text-align: left;
  }
}
</style>
